<template>
  <div class="p-4">
    <el-card class="box-card">
      <div slot="header" class="flex items-center justify-end">
        <el-button type="success" @click="handleAdd">新增</el-button>
      </div>

      <el-table :data="data" border>
        <el-table-column label="商户主体" prop="name"/>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="deBounceWrap(handleEdit, scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-size="15"
        :total="total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="getList"
      />
    </el-card>

    <!-- 删除弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <section class="flex items-center">
        <p class="w-24">商户名称:</p>
        <el-input v-model="rowData.name" placeholder="请填写商户名称"/>
      </section>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      data: [],
      page: 1,
      total: 0,
      currentPage: 1,
      rowData: {
        id: '',
        name: ''
      },
      title: '新增',
      //编辑模态框开关
      dialogVisible: false
    }
  },

  created() {
    this.getList()
  },

  methods: {
    //列表
    async getList(val = this.page) {
      this.currentPage = val
      const { data: { data, total } } = await request('/merchant/business/list', {
        params: {
          page: val,
          per_page: '15'
        }
      })
      this.data = data
      this.total = total
    },
    handleAdd() {
      this.title = '新增'
      this.dialogVisible = true
    },
    /** 编辑 */
    handleEdit(row) {
      this.title = '编辑'
      this.rowData = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    /** 编辑提交 */
    async confirmUpdate() {
      let code
      if (this.title === '新增') {
        ({ code } = await request('/merchant/business/create', {
          method: 'post',
          data: {
            name: this.rowData.name
          }
        }))
      } else {
        ({ code } = await request('/merchant/business/update', {
          method: 'post',
          data: this.rowData
        }))
      }

      if (code === 200) {
        this.$message.success('操作成功')
        await this.getList()
        this.dialogVisible = false
        this.rowData = {}
      }
    }
  },
  watch: {
    'dialogVisible'(value) {
      if (!value) this.rowData = {}
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
  border        : 1px dashed #d9d9d9;
  border-radius : 6px;
  cursor        : pointer;
  position      : relative;
  overflow      : hidden;
}

.avatar-uploader .el-upload:hover {
  border-color : #409eff;
}

.avatar-uploader-icon {
  font-size   : 28px;
  color       : #8c939d;
  width       : 100px;
  height      : 100px;
  line-height : 100px;
  text-align  : center;
}

.avatar {
  width   : 100px;
  height  : 100px;
  display : block;
}

/deep/ .el-upload-list__item {
  transition : none !important;
}

/deep/ .el-upload-list--picture {
  max-height : 103px !important;
  overflow   : hidden;
}

/deep/ .el-upload-list--text {
  max-height : 100px !important;
  overflow   : hidden;
}

/deep/ .el-upload-list__item-name {
  white-space : normal !important;
}
</style>
